<template>
    <div class="showMesage">
        <div v-for="value, key in  messageData " :key="key" class="message">
            <div class="keyMessage">
                {{ key }}:
            </div>
            <div>
                {{ value }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue"
import { userCustomerFollowIDUpApi, userCustomerFollowUpApi, userCustomerEditApi } from "@/services/customer";
import * as chinaAreaData from 'element-china-area-data';
interface IProps {
    showMessageId: number
}
const props = defineProps<IProps>()
const messageData = ref({})
onMounted(async () => {
    let ret = await userCustomerFollowIDUpApi(props.showMessageId)
    combingData(ret.data.customer)
});
//梳理数据

const combingData = (message: any) => {

    delete message['id'];

    const keyData = {
        "customername": "客户姓名",
        "customersex": "性别",
        "customercontact": "联系人",
        "customerbirthday": "生日",
        "customerphone": "客户电话",
        "customerprofile": "客户简介",
        "customeremail": "客户邮箱",
        "customerarea": "地区",
        "customerposition": "客户职位",
        "creditcode": "信用编码",
        "customersource": "客户来源",
        "followupstatus": "跟进状态",
        "customerlevel": "客户等级",
        "followuptime": "跟进时间",
        "intentionalproduct": "产品类型",
        "founder": "创建者",
        "followupdepartment": "跟进部门",
        "remark": "备注信息"
    };
    const parsedMessage = JSON.parse(JSON.stringify(message));
    const transformedMessage: any = {};

    for (const key in keyData) {
        if (keyData.hasOwnProperty(key) && parsedMessage.hasOwnProperty(key)) {
            transformedMessage[(keyData as any)[key]] = parsedMessage[key];
        }
    }

    Object.assign(messageData.value, transformedMessage)

};
</script>

<style lang="scss" scoped>
.showMesage {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  

    .message {
        width: 20%;
        margin: 20px;

        display: flex;
        justify-content: flex-start;
        align-items: center;



        .keyMessage {
            width: 120px;
        }
    }
}
</style>